<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="../css/reset.css"> -->
  <style>
    .w {
      width: 1226px;
      margin: 0 auto;
    }

    .goodsList li {
      width: 230px;
      float: left;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #333;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .goodsList li img {
      width: 80%;
      display: block;
      margin: 0 auto;
    }

    .title {
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      line-height: 32px;
      font-size: 14px;
      color: #e33333;
    }
  </style>
</head>

<body>
  <!-- ul.goodsList>li>a>img+.title+.price -->
  <ul class="goodsList w cl">
    <!-- <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li> -->
  </ul>
</body>
<script>
     // 描述一件商品的信息
  /*   var goods = {
       goodsId:"A001",
       goodsName:" 一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机",
       goodsPrice:"3199.00",
       goodsImg:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
   }

   var goodsList = [{
       goodsId:"A001",
       goodsName:" 一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机",
       goodsPrice:"3199.00",
       goodsImg:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
   },{
       goodsId:"A001",
       goodsName:" 一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机",
       goodsPrice:"3199.00",
       goodsImg:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
   },{
       goodsId:"A001",
       goodsName:" 一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机",
       goodsPrice:"3199.00",
       goodsImg:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
   },{
       goodsId:"A001",
       goodsName:" 一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机",
       goodsPrice:"3199.00",
       goodsImg:"https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp"
   }] */

</script>
<script>
  var ul = document.getElementsByClassName("goodsList")[0];

  var xhr = new XMLHttpRequest();  // 0

  xhr.open("get", "../date/goods.json", true);  // 1

  xhr.send();   // 1

  xhr.onreadystatechange = function () {
    // 2  3  4 
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result = xhr.responseText;
      console.log(result);
      var list = JSON.parse(result);
      console.log(list);

      // var obj = list.values();
      // for(var goods of obj){
      //     console.log(goods);
      // }

      var html = "";
      list.forEach(function (item) {
        console.log(item);
        // var goodsMsg = item.goodsMsg;
        var { goodsName, goodsMsg, goodsPrice, goodsImg, goodsId } = item;
        html += `<li> 
                    <a href="">
                        <img src="${goodsImg}" alt="">
                        <div class="title">${goodsMsg}</div>
                        <div class="price">￥ ${goodsPrice} </div>
                    </a>
            </li>`;
      })
      ul.innerHTML = html;

    }
  }




</script>

</html>